<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';

const { keyword_Store } = storeToRefs(useSearchHistory())
// 存储视频数据
let saveVidelData = ref<any>([])
// 存储的视频总数
let videoCount = ref<any>(0)
// 请求歌单所有评论的页码
let allCommentPage = ref<any>(1)
onMounted(() => requestSynthesizeSearchResultFn())
// 请求视频数据
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 1014, 30, allCommentPage.value).then((data: any) => {
        // console.log(data, '请求的视频数据');
        saveVidelData.value = data.result.videos
        videoCount.value = data.result.videoCount
    }).catch(_ => { })
}
const changePages = () => requestSynthesizeSearchResultFn()

</script>


<template>
    <div class="VideoWrap">
        <VideoItem v-if="saveVidelData.length" v-for="item in saveVidelData" :name="item.title" :imgurl16v9="item.coverUrl"
            :duration="item.durationms" :playCount="item.playTime" :id="item.vid" />
        <MVItemSkeleton v-else v-for="item in 15" />
        <div class="paging">
            <el-pagination small background layout="prev, pager, next" :total="videoCount"
                v-model:current-page="allCommentPage" @current-change="changePages" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.VideoWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .paging {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 50px;

        :deep(.number) {
            border-radius: 4px;
            font-family: none;
            font-family: $textFont;
            background-color: transparent;
            border: 1px solid $lineColor;

            &:hover {
                color: $font_main_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.is-active) {
            background-color: $theme-red !important;
            border-radius: 4px;

            &:hover {
                color: $theme-white;
                background-color: $theme-red;
            }
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }

        :deep(.more) {
            border-radius: 4px;
            border: 1px solid $lineColor;
            background-color: transparent;

            &:hover {
                color: $font_red_color;
                background-color: $BK_GRAY;
            }
        }
    }
}
</style>